<template>
	<view>
		<!-- 邀约弹窗 -->
		<tui-drawer mode="bottom" :maskZIndex="999990" :zIndex="999999" :visible="visible" @close="closeDrawer">
			<solt>
				<view class="invite-container">
					<view class="title">
						<text class="titleTxt">教练邀约</text>
						<view class="close" @tap="closeDrawer">
							<image class="closeImg" src="/static/user/icon_off@2x.png"></image>
						</view>
					</view>
					<view class="invite-content">
						<InviteItem ref="inviteItemRef" :categoryId="categoryId"></InviteItem>
					</view>
					<view class="inite-agreement">
						<view class="contents"> 
							<view @tap="isAgreement=!isAgreement" :class="isAgreement ? 'checked':'isChecked'"></view>
							<view class="agreement_content">
								<text>已阅读并同意</text>
								<text class="place" @tap="orderInstructions(3)">《下单须知》</text>
								<text>与</text>
								<text class="rule"  @tap="orderInstructions(4)">《计费规则》</text>
							</view>
						</view>
					</view>
					<tui-form-button @click="inviteVerify" radius="20rpx" size="32" color="#fff" width="690rpx"
						height="84rpx" background="#2FD7D3">
						<tui-icon name="alarm" color="#fff" :size="28" margin="0 8rpx 0 0"></tui-icon>
						确认邀约
					</tui-form-button>
				</view>
			</solt>
		</tui-drawer>
	</view>
</template>

<script>
	import InviteItem from './compontents/inviteItem.vue';
	import { invitePlace } from "@/http/api/order/order.js"
	export default {
		name: 'TutorInvite',
		emits: ['clear','confimInvite'],
		props: {
			visible:{
				type:Boolean,
				default:false
			},
			//分类id
			categoryId:{
				type:String,
				default:''
			},
			//教练id
			assistantId:{
				type:String,
				default:''
			},
			//商家id
			merchantId:{
				type:String,
				default:''
			}
		},
		components: {
			InviteItem
		},
		data() {
			return {
				isAgreement:false,
			};
		},
		watch:{
			visible:{
				handler(){
					this.$refs.inviteItemRef.reload()
				},
				deep:true,
				immediate:false
			}
		},
		methods: {
			orderInstructions(type){
				uni.navigateTo({
					url:'/pages/mine/modules/richText/richText?type='+type
				})
			},
			closeDrawer(){
				this.$emit('clear')
			},
			inviteVerify(){
				let info=this.$refs.inviteItemRef.tutorPlaceData
				if(!info.startTime){
					this.$utils.toast('请选择开始时间');
					 return;
				}
				if(!info.endTime){
					this.$utils.toast('请选择结束时间');
				    return;
				}
				if(!info.merchantInfo.address){
					this.$utils.toast('请选择地址');
				    return;
				}
				if(!info.appellation){
					this.$utils.toast('请输入您的称呼');
				    return;
				}
				if(!info.subscribePhone){
					this.$utils.toast('请输入预约电话');
				    return;
				} 
				uni.requestSubscribeMessage({
					tmplIds:['cJaHXf2IilJBfjonfkyRgtv45AtY4fL-xE55mwgy36I'],
					success: res => { 
						if(res['cJaHXf2IilJBfjonfkyRgtv45AtY4fL-xE55mwgy36I'] === 'accept'){
							invitePlace({...info,assistantId:this.assistantId,merchantId:this.merchantId}).then(res=>{
								if(res.code===200){
									this.$utils.toast('邀约成功'); 
									this.$emit('confimInvite')
									this.$refs.inviteItemRef.reload()
								}
							})
						}
					},
					fail: res=>{
						console.log(res)
					} 
				});  
				 
			}
		}
	};
</script>

<style lang="scss" scoped>
	.invite-container{
		padding: 0 30rpx 8rpx 30rpx;
		.inite-agreement{
			padding-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.contents{
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
				align-items: center;
				display: flex;
				.checked{
					width: 24rpx;
					height: 24rpx;
					background: #E7E7E7;
					border-radius: 50%;
					border: 4rpx solid #F5F5F5;
				}
				.isChecked{ 
					width: 24rpx;
					height: 24rpx;
					background: #2FD7D3; 
					border-radius:50%; 
					border:4rpx solid #F5F5F5;
				}
				.agreement_content{
					display: flex;
					align-items: center;
					margin-left: 12rpx;
					.place{
						color: #FF9F29;
					}
					.rule{
						color: #FF9F29;
					}
				}
			}
		}
		.title{
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			  display: flex;
			   align-items: center; /* 垂直居中 */
			   justify-content: center; /* 使所有内容居中 */
			   position: relative; /* 相对定位父容器，方便定位图标 */
			.titleTxt{
				font-weight: bold;
				font-size: 36rpx;
				color: #1A1A1A;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				  flex: 1; /* 标题占据剩余空间 */
				  text-align: center; /* 标题居中 */
			}
			.close{
				   position: absolute; /* 绝对定位图标 */
				   right: 0; /* 图标右对齐 */
				  width: 48rpx;
				  height: 48rpx;
				  .closeImg{
					  width: 100%;
					  height: 100%;
				  }
			}
		}
	}
</style>